<template>
    <div>
        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">车位号：</span>
                <el-input v-model="input1" placeholder="请输入车位号(例如：A区1-1)"></el-input>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">备注：</span>
                <el-input v-model="input2" placeholder="请输入申请车辆类型(电车车位,普通车位)"></el-input>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <span style="margin-right: 1100px;" class="input-label">物业：</span>
            <el-select style="margin-right: 1100px;" v-model="selectedValue" placeholder="请选择">
                <el-option v-for="option in options" :key="option.certifiedInfoName" :label="option.certifiedInfoName"
                    :value="option.certifiedInfoName" />
            </el-select>
        </el-row>
        <el-upload style="margin-right: 1180px; margin-top: 20px;" class="upload-demo" action="#"
            :http-request="uploadImage" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
            multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList" :on-success="afterUpload">
            <el-button size="small" type="primary">上传车位购买证明</el-button>
        </el-upload>

        <el-row style="margin-left: -1190px; margin-top: 20px;">
            <el-button type="primary" @click="updateuserinfo">
                添加申请
            </el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "RentersCarcerApply",
    data() {
        return {
            selectedValue: '', // 用于存储当前选中的值
            options: [], // 用于存储从后端查询的选项数组
            input1: '',
            input2: '',
            dialogVisible: false,
            fileList: [],
            page: {},
            images:""
        }
    },
    methods: {
        loadAllcertifiedinfo() {
            this.$http.get("/certified/certifiedInfo/loadAllcertifiedinfo", {
                params: {
                    pageNum: 1,
                    pageSize: 100
                }
            }).then(resp => {
                console.log(resp.data.data);
                this.options = resp.data.data.list;
            });
        },
        showdialog() {
            this.dialogVisible = true;
            this.loadAllcertifiedinfo(); //在调用showdialog方法时执行loadAllcertifiedinfo方法
        },
        updateuserinfo() {
            // 在 options 数组中查找选中的 certifiedInfoName 对应的 certifiedInfoId
            const selectedCertifiedInfo = this.options.find(option => option.certifiedInfoName === this.selectedValue);
            const certifiedInfoId = selectedCertifiedInfo ? selectedCertifiedInfo.certifiedInfoId : null;
            const requestData = {
                stall: this.input1,
                notes: this.input2,
                image:this.images,
                certifiedInfoId: certifiedInfoId
            };
            this.$http.post("/stall/stallInfo/rentersinsertstall",requestData).then(resp => {
                alert(resp.data.message);
                this.dialogVisible = false;
                this.input1 = "";
                this.input2 ="";
            });
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        afterUpload(response, file, fileList) {
            console.log(response);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        uploadImage(e) {
            let formData = new FormData();
            formData.append("image", e.file);
            this.$http.post("/stall/stallInfo/uploadImage", formData, {
                headers: { "Content-Type": "multipart/form-data" }
            }).then(resp => {
                alert(resp.data.message);
                this.images= resp.data.data
            });
        },
    },
    created() {
        this.loadAllcertifiedinfo();
    }
}
</script>

<style scoped></style>